<template>
  <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="0" size="large">

    <el-form-item prop="mobile">
      <el-input v-model="ruleForm.mobile" prefix-icon="iphone" clearable :placeholder="$t('login.mobileError')">
        <template #prepend>+86</template>
      </el-input>
    </el-form-item>

    <el-form-item prop="captcha">
      <div class="login-msg-yzm">
        <el-input v-model="ruleForm.captcha" prefix-icon="unlock" clearable
          :placeholder="$t('login.smsError')"></el-input>
        <el-button @click="getcode" :disabled="disabled">{{ $t('login.smsGet') }}<span v-if="disabled">({{ time
            }})</span></el-button>
      </div>
    </el-form-item>

    <el-form-item>
      <el-button @click="login(ruleFormRef)" type="primary" style="width: 100%;" round :loading='isLogin'>{{
        $t('login.signIn') }}</el-button>
    </el-form-item>
    <el-form-item>
      <router-link to="">{{ $t('login.forgetPassword') }}</router-link>
    </el-form-item></el-form>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { PhoneRuleForm } from '@interface/login'
import { LoginYzm, LoginByMobile } from '@api/login'
import { Encrypt } from '@utils/aes'
import userLogin from '@hooks/userLogin'
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<PhoneRuleForm>({
  mobile: '',
  captcha: ''
})
const validatel = (rule: any, value: string, callback: any) => {
  if (value == '') {
    callback(new Error('请输入手机号'))
  } else if (!/^1[3-9]\d{9}$/.test(value)) {
    callback(new Error('请输入正确手机号'))
  } else {
    callback()
  }
}
const getcode = async () => {
  const validate = await ruleFormRef.value?.validateField('mobile', () => { })
  console.log(validate)
  if (!validate) {
    ElMessage.error('请填写正确的手机号')
  } else {

    let res = await LoginYzm({
      mobile: Encrypt(ruleForm.mobile)
    })
    userLogin(res)
    if (res.code != "200") return ElMessage.error(res.msg)
    ElMessage.success('发送成功')
    disabled.value = true
    time.value = 60
    let tiemr = setInterval(() => {
      time.value -= 1;
      if (time.value < 1) {
        clearInterval(tiemr)
        disabled.value = false
        time.value = 0
      }
    }, 1000);
  }
}
const rules = reactive<FormRules<PhoneRuleForm>>({
  mobile: [
    { validator: validatel, trigger: 'blur' },
  ],
  captcha: [
    { required: true, message: '请输入', trigger: 'blur' },
  ]
})
const time = ref<number>(60);
const disabled = ref<boolean>(false);
const isLogin = ref<boolean>(false);

// 登录验证规则
const login = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate(async (valid) => {
    if (valid) {
      let res = await LoginByMobile({
        mobile: Encrypt(ruleForm.mobile),
        captcha: Encrypt(ruleForm.captcha)
      })
      console.log(res)
      if (res.code != '200') {
        ElMessage.error(res.msg)
      } else {
        console.log(res.data)
      }
    } else {
      return ElMessage.warning('请填写正确内容')
    }
  })
}
</script>

<style scoped>
.login-msg-yzm {
  display: flex;
  width: 100%;
}

.login-msg-yzm .el-button {
  margin-left: 10px;
}
</style>
